<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>LittleGoal New</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col col-md-8 col-lg-6">
                <form class="form mt-3 needs-validation" novalidate>
                    <div class="form-group">
                        <label for="inpGoalName">目标名称</label>
                        <input type="text" class="form-control" id="inpGoalName" placeholder="请输入目标名称" required>
                        <div class="invalid-feedback">请输入目标名称</div>
                    </div>
                    <div class="form-group">
                        <label for="inpGoalDesc">目标描述</label>
                        <textarea class="form-control" id="inpGoalDesc" placeholder="请输入目标描述" rows="3"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary mb-2">添加目标</button>
                </form>
            </div>
        </div>

    </div>

    <script>
        // Example starter JavaScript for disabling form submissions if there are invalid fields
        (function () {
            'use strict';
            window.addEventListener('load', function () {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName('needs-validation');
                // Loop over them and prevent submission
                var validation = Array.prototype.filter.call(forms, function (form) {
                    form.addEventListener('submit', function (event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();
    </script>
</body>

</html>